<template>
  <!-- 包含子项遍历 -->
  <el-table-column
    v-if="column.children"
    :key="column.key"
    :label="$t(column.labelId)"
    align="center"
  >
    <column
      v-for="child of column.children"
      :key="child.key"
      :column="child"
      :form="form"
      :disabled="disabled"
      :rules="rules"
      :initial-values="initialValues"
      :options="options"
    />
  </el-table-column>
  <!-- 不包含子项 -->
  <el-table-column
    v-else
    :min-width="column.width ?? 120"
    :key="column.key"
    :label="$t(column.labelId)"
    align="center"
  >
    <template #header>
      <span v-if="column.required" class="required">*</span>
      <span>{{ $t(column.labelId) }}</span>
    </template>
    <template #default="scope">
      <el-form-item
        :required="column.required"
        :prop="prop(scope, column)"
        :rules="handleRule(column)"
      >
        <template v-if="column.formatter">
          <span
            v-html="column.formatter(scope.row, column, scope.$index)"
            @click="column.click && column.click(scope.row, scope.$index)"
          ></span>
        </template>
        <template v-else>
          <el-tooltip
            effect="dark"
            placement="top"
            :content="form.records[scope.$index][column['key']]"
            :disabled="handleTooltip(column, form.records[scope.$index])"
          >
            <component
              :is="`cmp-${column.type}`"
              :item="{ ...column, width: undefined }"
              :form="form.records[scope.$index] || {}"
              :options="options"
            />
          </el-tooltip>
        </template>
      </el-form-item>
    </template>
  </el-table-column>
</template>

<script lang="ts">
import CrossLine from './CrossLine.vue'
import { PropType, defineComponent } from 'vue'
import CmpInput from '@/components/Form/Item/Input.vue'
import CmpSelect from '@/components/Form/Item/Select.vue'
import CmpInputNumber from '@/components/Form/Item/InputNumber.vue'
import CmpDatePick from '@/components/Form/Item/DatePick.vue'
import { EditColumn } from '@/components/Records/types'
import { FormItemKey, ObjectType } from 'typings/interfaces'
import { useI18n } from 'vue-i18n'

export default defineComponent({
  name: 'Column',
  emits: ['update:modelValue'],
  components: {
    CrossLine,
    CmpInput,
    CmpSelect,
    CmpInputNumber,
    CmpDatePick,
  },
  props: {
    column: {
      type: Object as PropType<EditColumn>,
      required: true,
    },
    options: {
      type: Object as PropType<ObjectType>,
      default: () => ({}),
    },
    initialValues: {
      type: Array as PropType<ObjectType[]>,
      default: [],
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    form: {
      type: Object as PropType<ObjectType>,
      required: true,
    },
    rules: {
      type: Object as PropType<Record<FormItemKey, Array<ObjectType>>>,
      required: true,
    },
  },
  setup(props) {
    const { t } = useI18n()
    const handleRule = (item: EditColumn) => {
      if (!props.rules[item.key] && item.required) {
        return [
          {
            required: true,
            message: t('lang.validate.required'),
            validator: (rule, value, cb) => {
              if (value) {
                cb()
              } else {
                cb(new Error(t('lang.validate.required')))
              }
            },
          },
        ]
      }
    }
    const handleTooltip = (column: EditColumn, form: ObjectType) => {
      if (column.tooltipLength && form[column['key']]?.length) {
        return column.tooltipLength > form[column['key']].length
      }
      return true
    }
    return {
      handleRule,
      handleTooltip,
    }
  },
  methods: {
    prop({ $index }: ObjectType, { key }: ObjectType) {
      if ($index === -1) return ''
      return 'records.' + $index + `.${key}`
    },
  },
})
</script>
<style scoped lang="scss">
.operate {
  margin: 10px 0;
}
.required {
  color: #f56c6c;
  margin-right: 4px;
}
</style>
